import { useState, useRef } from 'react';
import { motion } from 'framer-motion';
import emailjs from '@emailjs/browser';

import { styles } from '../styles';
import { EarthCanvas } from './canvas';
import { SectionWrapper } from '../hoc';
import { slideIn } from '../utils/motion';

const Contact = () => {
  const formRef = useRef();
  const [form, setForm] = useState({
    name: '',
    email: '',
    message: '',
  });
  const [loading, setLoading] = useState(false);
  
  const handleChange = (e) => {
    const { name, value } = e.target;
    // console.log(name, value);
    setForm({ ...form, [name]: value})
    // console.log(form);
  }

  const handleSubmit = (e) => {
    e.preventDefault();
    setLoading(true);
    emailjs.send(
      "service_cpoiawe",
      "template_miqccub",
      {
        from_name: form.name,
        to_name: 'Deni',
        from_email: form.email,
        to_email: "deni.shaipp@gmail.com",
        message: form.message,
      },
      "uohSpwglT7S9wTGt0"
      )
      .then( () => {
        setLoading(false);
        alert('Email has been sent!');
        setForm({
          name: "",
          email: "",
          message: "",
        });
      }, error => {
        setLoading(false);
        console.log(error);
        alert("Something went wrong!");
      })
  }

  return (
    <div className="xl:mt-12 xl:flex-row flex-col-reverse flex gap-10 overflow-hidden">
      <motion.div
        variants={slideIn('left', 'tween', 0.2, 1)}
        className="flex-[0.75] bg-black-100 p-8 rounded-2xl"
      >
      <p className={styles.sectionSubText}>Get in touch</p>
      <h3 className={styles.sectionHeadText}>Contact.</h3>

      <form ref={formRef} onSubmit={handleSubmit} className='mt-12 flex flex-col gap-8'>
        <label className="flex flex-col">
          <span className="font-medium mb-4">Your name</span>
          <input
            type="text"
            name="name"
            value={form.name}
            onChange={handleChange}
            placeholder="What's your name?"
            className="bg-tertiary py-4 px-6 placeholder: text-secondary rounded-lg text-white outlined-none border-none font-medium"
          />
        </label>
        <label className="flex flex-col">
          <span className="font-medium mb-4">Your email</span>
          <input
            type="email"
            name="email"
            value={form.email}
            onChange={handleChange}
            placeholder="What's your email?"
            className="bg-tertiary py-4 px-6 placeholder: text-secondary rounded-lg text-white outlined-none border-none font-medium"
          />
        </label>
        <label className="flex flex-col">
          <span className="font-medium mb-4">Your message</span>
          <textarea
            rows="7"
            name="message"
            value={form.message}
            onChange={handleChange}
            placeholder="What do you want to say?"
            className="bg-tertiary py-4 px-6 placeholder: text-secondary rounded-lg text-white outlined-none border-none font-medium"
          />
        </label>
        <button
          type="submit"
          className="text-white bg-blue-950 py-4 px-8 outline-none text-white w-fit font-bold shadow-md rounded-xl"
        >
          {loading ? "Sending..." : 'Send'}
        </button>
      </form>
      </motion.div>

      <motion.div
        variants={slideIn('right', 'tween', 0.2, 1)}
        className="xl:flex-1 xl:h-auto md:h-[550px] h-[350px]"
      >
        <EarthCanvas />
      </motion.div>
    </div>
  )
}

export default SectionWrapper(Contact, "contact");